<template>
  <ul :class="ulCls">
    <li
      v-if="$parent.accept !=='' && files.length === 0"
      :class="acceptCls">
      <span :class="[prefixCls + '-accept-file-types-details']" >
        支持扩展名: {{ $parent.accept }}
      </span>
    </li>
    <template v-if=" showType !== 'drag-1'">
      <li
        v-for="(file,index) in files"
        :key="index"
        :class="fileCls(file)"
        @click="handleClick(file)">
        <template v-if="file.status !== 'uploading'">
          <span
            @click="handlePreview(file)"
            :class="uploadFileTitleCls(file)">
            <Icon type="link"></Icon>
            <span style="margin-left: 9px;display: inline-block;width: 300px;">
              <e-tooltip :content=file.name>
                {{ file.name }}
              </e-tooltip>
            </span>
          </span>
          <Icon
            type="cross"
            :class="[prefixCls + '-list-remove']"
            @click.enter="handleRemove(file)"></Icon>
        </template>
        <transition name="fade">
          <Progress
            v-if="file.status === 'uploading'"
            :stroke-width="22"
            stroke-color="#E1ECFF"
            :text-inside="true"
            :percent="parsePercentage(file.percentage)"
            :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'">
            <template v-slot:progress-content>
              <Icon type="link"></Icon>
              <span style="margin-left: 9px;display: inline-block;width: 300px;">
                <e-tooltip :content=file.name>
                  {{ file.name }}
                </e-tooltip>
              </span>
            </template>
            <template v-slot:button-close>
              <Icon
                type="cross"
                :class="[prefixCls + '-list-remove',prefixCls + '-list-remove-on-progress']"
                @click.enter="handleRemove(file)"></Icon>
            </template>
          </Progress>
        </transition>
      </li>
    </template>
    <template v-else>
      <li
        v-for="(file,index) in files"
        :key="index"
        :class="[prefixCls + '-drag-1-li']"
      >
        <div :class="[prefixCls + '-drag-1-content']">
          <Icon
            :type="format(file)"
            :size="33"></Icon>
          <Icon
            class="icon-guanbi"
            type="cross"
            :size="8"
            @click.enter="handleRemove(file)"></Icon>
        </div>
        <div :class="[prefixCls + '-drag-1-content-sup']">
          <div :class="uploadFileTitleCls(file)">
            <div
              v-if="file.status === 'uploading'"
              :class="[prefixCls +'-drag-1-content-file-title-uploading']"></div>
            <p>{{ file.name }}</p>
          </div>
          <p>
            <slot name="details" :file="file"></slot>
          </p>
        </div>
      </li>
      <li style="clear: both;"></li>
    </template>
  </ul>
</template>
<script>
import Icon from '../icon/icon.vue';
const prefixCls = 'haloe-upload';
import Progress from './progress';

export default {
  name: 'UploadList',
  components: { Icon, Progress },
  props: {
    files: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    showType () {
      return this.$parent.type
    },
    ulCls () {
      return [`${prefixCls}-list`, {
        [`${prefixCls}-list-drag-1`]: this.showType === 'drag-1'
      }]
    },
    acceptCls () {
      return [`${prefixCls}-accept-file-types`, {
        [`${prefixCls}-accept-file-types-drag-1`]: this.showType === 'drag-1'
      }]
    }
  },
  data () {
    return {
      prefixCls: prefixCls
    }
  },
  methods: {
    fileCls (file) {
      return [
        `${prefixCls}-list-file`,
        {
          [`${prefixCls}-list-file-finish`]: file.status === 'finished',
          [`${prefixCls}-list-file-unupload`]: file.status !== 'uploading'
        }
      ]
    },
    uploadFileTitleCls (file) {
      if (this.showType === 'drag-1') {
        return [`${prefixCls}-drag-1-content-file-title`,
          {
            [`${prefixCls}-list-file-title-fail`]: file.status === 'fail'
          }]
      } else {
        return [
          `${prefixCls}-list-file-title`,
          {
            [`${prefixCls}-list-file-title-fail`]: file.status === 'fail'
          }
        ]
      }
    },
    handleClick (file) {
      this.$emit('on-file-click', file)
    },
    handlePreview (file) {
      this.$emit('on-file-preview', file)
    },
    handleRemove (file) {
      this.$emit('on-file-remove', file)
    },
    format (file) {
      const format = file.name.split('.').pop().toLocaleLowerCase() || ''
      let type = 'file-unknown'
      if (['xlsx', 'xls'].indexOf(format) > -1) {
        type = 'file-excel'
      }
      if (['doc', 'docx', 'wps'].indexOf(format) > -1) {
        type = 'file-word'
      }
      if (['rar', 'zip', '7z'].indexOf(format) > -1) {
        type = 'file-zip'
      }
      if (['pdf'].indexOf(format) > -1) {
        type = 'file-pdf'
      }
      if (['png', 'jpg', 'jpeg'].indexOf(format) > -1) {
        type = 'file-image'
      }
      if (['gif'].indexOf(format) > -1) {
        type = 'file-gif'
      }
      if (['ppt', 'pptx'].indexOf(format) > -1) {
        type = 'file-ppt'
      }
      if (['.txt'].indexOf(format) > -1) {
        type = 'file-txt'
      }
      return type
    },
    parsePercentage (val) {
      return parseInt(val, 10)
    }
  }
}
</script>
